<template>
  <div>
    <header>
      <h1>
        MBTI性格测试
      </h1>
    </header>
  </div>
  <div class="block text-center" m="t-93">
    <el-carousel class="quiz_kuang" ref="test4" trigger="change"  height="400px" :autoplay="false" arrow="never" indicator-position="none" border-radius="30px">
      <el-carousel-item v-for="(item,index) in titlelist" :key="index">
        <div class="timu_hao" style="color: rgba(255,255,255,0.92);font-size:200%">第{{item.id}}题</div>
        <h3 class="small justify-center" style="color: rgba(255,255,255,0.92);font-size:200%">{{ item.title }}</h3>
        <div class="test3">
          <div id="app" class="a_kuang">
            <el-button class="option_a"  @click="AaddResult(item)" type="primary" text-align="center" style="color: rgba(255,255,255,0.92);font-size:150%"><span>{{ item.a }}</span></el-button>
          </div>
          <div id="app" class="b_kuang">
            <el-button class="option_b"  @click="BaddResult(item)" type="primary" text-align="center" style="color: rgba(255,255,255,0.92);font-size:150%"><span>{{ item.b }}</span></el-button>
          </div>
          <div class="option_result">
            <el-button class="toresult" v-if="item.id==93" type="primary" @click="toresult(item)"  style="color: rgba(255,255,255,0.92);font-size:110%" ><span>查看结果</span></el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>

<!--  <div class="anniu" id="app">-->
<!--      <el-form label-width="75px">-->
<!--        <el-form-item>-->
<!--          <el-button @click="toBack(item)" class="shang-btn" type="primary" text-align="center" style="color: rgba(255,255,255,0.92);font-size:150%;"><span>上一题</span></el-button>-->
<!--          <el-button @click="toNext(item)" class="xia-btn" type="primary" text-align="center" style="color: rgba(255,255,255,0.92);font-size:150%;vertical-align:middle"><span>下一题</span></el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
</template>

<script>
import router from "../router/index";
import axios from "axios"
import {ElMessage} from "element-plus";

export default {
  name: "title",
  methods:{
    uploadAnswer(item,choose){
      //alert(localStorage.getItem('sno'))
      let config = {
        headers: {'Content-Type': "application/json, charset=UTF-8"}
      };
      var answer = "";
      if(choose == "a"){
        answer = item.keya
      }else if(choose == "b"){
        answer = item.keyb
      }
      if (localStorage.getItem('TasId') == "undefined") {
        localStorage.setItem('TasId', 0)
      }
      let data = {
        Tas_id: parseInt(localStorage.getItem('TasId')),
        sno: localStorage.getItem('sno'),
        ['answer_' + item.id]: answer
      };
      axios.post('http://localhost:8080/MBTI-backend/StoreTestAnswer', data, config).then(res => {
        if (item.id == "1") {
         // alert(JSON.stringify(res.data.data.value))
          localStorage.setItem("TasId", res.data.data.value.Tas_id)
         // alert(parseInt(localStorage.getItem('TasId')))
        }
        if(item.id >= "93"){
          localStorage.setItem("result",res.data.data.result)
          localStorage.removeItem("TasId")
          alert(localStorage.getItem("result"))
        }
      })
          .catch(error => {
            // obj.error ? obj.error(error) : null;
            alert(JSON.stringify(error))
          });
    },
    AaddResult(item){
      let i;
      i = item.id;
      this.uploadAnswer(item,"a");
      if(i!="93"){
        this.$refs.test4.next()
      }
    },
    BaddResult(item){
      let j;
      j = item.id;
      this.uploadAnswer(item,"b");
      if(j!=="93"){
        this.$refs.test4.next()
      }
    },

    toresult(item){
      if(item.id=="93") {
        router.push('/toresult')
        // alert(localStorage.getItem("result"))
      }
      else{
        ElMessage.error('未作答完毕，不可查看结果')
      }
    }
  },
  created() {
    localStorage.setItem("TasId", 0)
  },

  setup() {
    console.log(router.options.routes)

    return {
      titlelist:[
        {id:"1",title:"当你要外出一整天，你会",a:"A. 计划你要做什么和在什么时候做",keya:"J",b:"B. 说去就去",keyb:"P"},
        {id:"2",title:"你认为自己是一个",a:"A. 较为随兴所至的人",keya:"P",b:"B. 较为有条理的人",keyb:"J"},
        {id:"3",title:"假如你是一位老师，你会选教",a:"A.以事实为主的课程",keya:"S",b:"B.涉及理论的课程",keyb:"N"},
        {id:"4",title:"你通常",a:"A.与人容易混熟",keya:"E",b:"B.比较沉静或矜持",keyb:"I"},
        {id:"5",title:"一般来说，你和哪些人比较合得来？",a:"A.富于想象力的人",keya:"N",b:"B.现实的人",keyb:"S"},
        {id:"6",title:"你是否经常让",a:" A.你的情感支配你的理智",keya:"F",b:"B.你的理智主宰你的情感",keyb:"T"},
        {id:"7",title:"处理许多事情上，你会喜欢",a:"A.凭兴所至行事",keya:"P",b:"B.按照计划行事",keyb:"J"},
        {id:"8",title:"你是否",a:"A.容易让人了解",keya:"E",b:"B.难于让人了解",keyb:"I"},
        {id:"9",title:"按照程序表做事",a:"A.合你心意",keya:"J",b:"B.令你感到束缚",keyb:"P"},
        {id:"10",title:"当你有一份特别的任务，你会喜欢",a:"A.开始前小心组织计划",keya:"J",b:"B.边做边找须做什么",keyb:"P"},
        {id:"11",title:"在大多数情况下，你会选择",a:"A.顺其自然",keya:"P",b:"B.按程序表做事",keyb:"J"},
        {id:"12",title:"大多数人会说你是一个",a:"A.重视自我隐私的人",keya:"I",b:"B.非常坦率开放的人",keyb:"E"},
        {id:"13",title:"你宁愿被人认为是一个",a:"A.实事求是的人",keya:"S",b:"B.机灵的人",keyb:"N"},
        {id:"14",title:"在一大群人当中，通常是",a:"A.你介绍大家认识",keya:"E",b:"B.别人介绍你",keyb:"I"},
        {id:"15",title:"你会跟哪些人做朋友？",a:"A.常提出新注意的",keya:"N",b:"B.脚踏实地的",keyb:"S"},
        {id:"16",title:"你倾向",a:"A.重视感情多于逻辑",keya:"F",b:"B.重视逻辑多于感情",keyb:"T"},
        {id:"17",title:"你比较喜欢",a:"A.坐观事情发展才作计划",keya:"P",b:"B.很早就作计划",keyb:"J"},
        {id:"18",title:"你喜欢花很多的时间",a:" A.一个人独处",keya:"I",b:"B.合别人在一起",keyb:"E"},
        {id:"19",title:"与很多人一起会",a:"A.令你活力培增",keya:"E",b:"B.常常令你心力憔悴",keyb:"I"},
        {id:"20",title:"你比较喜欢",a:"A.很早便把约会、社交聚集等事情安排妥当",keya:"J",b:" B.无拘无束，看当时有什么好玩就做什么",keyb:"P"},
        {id:"21",title:"计划一个旅程时，你较喜欢",a:"A.大部分的时间都是跟当天的感觉行事",keya:"P",b:"B.事先知道大部分的日子会做什么",keyb:"J"},
        {id:"22",title:"在社交聚会中，你",a:"A.有时感到郁闷",keya:"I",b:"B.常常乐在其中",keyb:"E"},
        {id:"23",title:"你通常",a:"A.和别人容易混熟",keya:"E",b:"B.趋向自处一隅",keyb:"I"},
        {id:"24",title:"哪些人会更吸引你？",a:"A.一个思想敏捷及非常聪颖的人",keya:"N",b:"B.实事求是，具丰富常识的人",keyb:"S"},
        {id:"25",title:"在日常工作中，你会",a:"A.颇为喜欢处理迫使你分秒必争的突发",keya:"P",b:"B.通常预先计划，以免要在压力下工作",keyb:"J"},
        {id:"26",title:"你认为别人一般",a:"A.要花很长时间才认识你",keya:"I",b:"B.用很短的时间便认识你",keyb:"E"},
        {id:"27",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.注重隐私",keya:"I",b:"B.坦率开放",keyb:"E"},
        {id:"28",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.预先安排的",keya:"J",b:"B.无计划的",keyb:"P"},
        {id:"29",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.抽象",keya:"N",b:"B.具体",keyb:"S"},
        {id:"30",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.温柔",keya:"F",b:"B.坚定",keyb:"T"},
        {id:"31",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.思考",keya:"T",b:"B.感受",keyb:"F"},
        {id:"32",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.事实 ",keya:"S",b:"B.意念",keyb:"N"},
        {id:"33",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.冲动 ",keya:"P",b:"B.决定",keyb:"J"},
        {id:"34",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.热衷 ",keya:"E",b:"B.文静",keyb:"I"},
        {id:"35",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.文静 ",keya:"I",b:"B.外向",keyb:"E"},
        {id:"36",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.有系统",keya:"J",b:"B.随意",keyb:"P"},
        {id:"37",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.理论  ",keya:"N",b:"B.肯定",keyb:"S"},
        {id:"38",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.敏感",keya:"F",b:"B.公正",keyb:"T"},
        {id:"39",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.令人信服",keya:"T",b:"B.感人的",keyb:"F"},
        {id:"40",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.声明 ",keya:"S",b:"B.概念",keyb:"N"},
        {id:"41",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.不受约束",keya:"P",b:"B.预先安排",keyb:"J"},
        {id:"42",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.矜持",keya:"I",b:"B.健谈",keyb:"E"},
        {id:"43",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.有条不紊",keya:"J",b:"B.不拘小节",keyb:"P"},
        {id:"44",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.意念",keya:"N",b:"B.实况",keyb:"S"},
        {id:"45",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.同情怜悯",keya:"F",b:"B.远见",keyb:"T"},
        {id:"46",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.利益",keya:"T",b:"B.祝福",keyb:"F"},
        {id:"47",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.务实的",keya:"S",b:"B.理论的",keyb:"N"},
        {id:"48",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.朋友不多",keya:"I",b:"B.朋友众多",keyb:"E"},
        {id:"49",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.有系统",keya:"J",b:"B.即兴",keyb:"P"},
        {id:"50",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.富想象的 ",keya:"N",b:"B.以事论事",keyb:"S"},
        {id:"51",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.亲切的",keya:"F",b:" B.客观的",keyb:"T"},
        {id:"52",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.客观的",keya:"T",b:"B.热情的",keyb:"F"},
        {id:"53",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.建造",keya:"S",b:"B.发明",keyb:"N"},
        {id:"54",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.文静",keya:"I",b:"B.爱合群",keyb:"E"},
        {id:"55",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.理论",keya:"N",b:"B.事实",keyb:"S"},
        {id:"56",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.富同情",keya:"F",b:"B.合逻辑",keyb:"T"},
        {id:"57",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.具分析力",keya:"T",b:"B.多愁善感",keyb:"F"},
        {id:"58",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.合情合理",keya:"S",b:"B.令人着迷",keyb:"N"},
        {id:"59",title:"你要在一个星期内完成个大项目，开始时会",a:"A.把要做的不同工作依次列出",keya:"J",b:"B.马上动工",keyb:"P"},
        {id:"60",title:"在社交场合中，你经常会感到",a:"A.与某些人很难交心和保持对话，或是",keya:"I",b:"B.与多数人都能从容地长谈",keyb:"E"},
        {id:"61",title:"要做许多人也做的事，你比较喜欢",a:"A.按照一般认可的方法去做",keya:"S",b:"B.构想一个自己的想法",keyb:"N"},
        {id:"62",title:"你刚认识的朋友能否说出你的兴趣？",a:"A.马上可以",keya:"E",b:"B.要待他们真正了解你之后才可以",keyb:"I"},
        {id:"63",title:"你通常较喜欢的科目是",a:"A.讲授概念和原则的",keya:"N",b:"B.讲授事实和数据的",keyb:"S"},
        {id:"64",title:"哪个是较高的赞誉，或称许为？",a:"A.一贯感性的人",keya:"F",b:"B.一贯理性的人",keyb:"T"},
        {id:"65",title:"你认为按照程序表做事",a:"A.有时是需要的，但一般不大喜欢这样做",keya:"P",b:"B.大多数情况下是有帮助而且是你喜欢做的",keyb:"J"},
        {id:"66",title:"和一群人在一起，你通常会选",a:"A.跟你很熟悉的个别人谈话",keya:"I",b:"B.参与大伙的谈话",keyb:"E"},
        {id:"67",title:"在社交聚会上，你会",a:"A.是说话很多的一个",keya:"E",b:"B.让别人多说话",keyb:"I"},
        {id:"68",title:"把周末期间要完成的事列成清单，这个主意会",a:"A.合你意",keya:"J",b:"B.使你提不起劲",keyb:"P"},
        {id:"69",title:"哪个是较高的赞誉，或称许为",a:"A.能干的",keya:"T",b:"B.富有同情心",keyb:"F"},
        {id:"70",title:"你通常喜欢",a:"A.事先安排你的社交约会",keya:"J",b:"B.随兴之所至做事",keyb:"P"},
        {id:"71",title:"总的说来，要做一个大型作业时，你会选",a:"A.边做边想该做什么",keya:"P",b:"B.首先把工作按步细分",keyb:"J"},
        {id:"72",title:"你能否滔滔不绝地与人聊天",a:"A.只限于跟你有共同兴趣的人",keya:"I",b:"B.几乎跟任何人都可以",keyb:"E"},
        {id:"73",title:"你会",a:"A.跟随一些证明有效的方法",keya:"S",b:"B.分析还有什么毛病，及针对未解决的难题",keyb:"N"},
        {id:"74",title:"为乐趣而阅读时，你会",a:"A.喜欢奇特或创新的表达方式",keya:"N",b:"B.喜欢作者直话直说",keyb:"S"},
        {id:"75",title:"你宁愿替哪一类上司（或者老师）工作？",a:"A.天性淳良，但常常前后不一的",keya:"T",b:"B.言词尖锐但永远合乎逻辑的",keyb:"N"},
        {id:"76",title:"你做事多数是",a:"A.按当天心情去做",keya:"P",b:"B.照拟好的程序表去做",keyb:"J"},
        {id:"77",title:"你是否",a:"A.可以和任何人按需求从容地交谈",keya:"E",b:"B.只是对某些人或在某种情况下才畅所欲言",keyb:"I"},
        {id:"78",title:"要作决定时，你认为比较重要的是",a:"A.据事实衡量",keya:"T",b:"B.考虑他人的感受和意见",keyb:"F"},
        {id:"79",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.想象的",keya:"N",b:"B.真实的",keyb:"S"},
        {id:"80",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.仁慈慷慨的",keya:"F",b:"B.意志坚定的",keyb:"T"},
        {id:"81",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.公正的",keya:"T",b:"B.有关怀心",keyb:"F"},
        {id:"82",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.制作 ",keya:"S",b:"B.设计",keyb:"N"},
        {id:"83",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.可能性",keya:"N",b:"B.必然性",keyb:"S"},
        {id:"84",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.温柔",keya:"F",b:"B.力量",keyb:"T"},
        {id:"85",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.实际",keya:"T",b:"B.多愁善感",keyb:"F"},
        {id:"86",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.制造",keya:"S",b:"B.创造",keyb:"N"},
        {id:"87",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.新颖的",keya:"N",b:"B.已知的",keyb:"S"},
        {id:"88",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.同情",keya:"F",b:"B.分析",keyb:"T"},
        {id:"89",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.坚持己见",keya:"T",b:"B.温柔有爱心",keyb:"F"},
        {id:"90",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.具体的",keya:"S",b:"B.抽象的",keyb:"N"},
        {id:"91",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.全心投入",keya:"F",b:"B.有决心的",keyb:"T"},
        {id:"92",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.能干",keya:"T",b:"B.仁慈",keyb:"F"},
        {id:"93",title:"在下列一对词语中，哪一个词语更合你心意？",a:"A.实际",keya:"S",b:"B.创新",keyb:"N"},
      ]
    };
  },
};

</script>
<style lang="scss" scoped>

.demonstration {
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
  color:white;
}

/*题目内容框在这里*/
.el-carousel__item h3 {
  width:600px;
  height: 100px;
  text-align: center;
  line-height: 45px;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 35px;
  margin-right: 20px;
  border-radius:20px;   /*设置边框圆度*/
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}
/*偶数页面的内框*/
.el-carousel__item:nth-child(2n) {
  //background-color: rosybrown;
  background-color: rgba(9, 0, 0, 0.3);
}
/*奇数页面的内框*/
.el-carousel__item:nth-child(2n + 1) {
  //background-color: rosybrown;
  background-color: rgba(9, 0, 0, 0.3);
}
/*最大的那个题目框*/
.quiz_kuang{
  width:700px;
  height: 450px;
  margin-top: 130px;
  margin-bottom: 0px;
  margin-left: 420px;
  margin-right: 90px;
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  border-radius:20px;   /*设置边框圆度*/
  padding:15px;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 7px 7px 17px rgba(12, 5, 5, 0.7);   /*阴影*/
}

.a_kuang{
  width:400px;
  height: 50px;
  margin-top: 0px;
  margin-bottom: 20px;
  margin-left: 0px;
  margin-right: 0px;
}
.b_kuang{
  width:400px;
  height: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.timu_hao{
  width:600px;
  height: 50px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  margin-left: 35px;
  margin-right: 20px;
  border-radius:20px;   /*设置边框圆度*/
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}

.test2{
  width:600px;
  height:50px;
  margin:40px auto;
  //border:1px solid  #fcd3d3;
  border-radius:30px;
  padding:20px;
  //background-color:white;
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}
.test3{
  margin-left: 70px;
  margin-bottom: 40px;
}

.option_result{
  width:400px;
  height: 50px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.toresult{
  width:200px;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 400px;
  margin-right: 0px;
  border-radius:20px;   /*设置边框圆度*/
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}
.toresult:hover{    /*鼠标悬停在按钮上的样式*/
  background-color: rgba(9, 0, 0, 0.5);
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);  /*阴影*/
}
.toresult span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.toresult span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.toresult:hover span {
  padding-right: 25px;
}
.toresult:hover span:after {
  opacity: 1;
  right: 0;
}


.option_a {
  //border:1px solid #c46b6b;
  //background-color: unset;
  width: 500px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 15px;
  margin-right: 0px;
  border-radius: 20px; /*设置边框圆度*/
  border: 2px solid rgba(131, 82, 3, 0.13); /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}
.option_a:hover{    /*鼠标悬停在按钮上的样式*/
  background-color: rgba(9, 0, 0, 0.5);
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);  /*阴影*/
}
.option_a span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.option_a span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.option_a:hover span {
  padding-right: 25px;
}
.option_a:hover span:after {
  opacity: 1;
  right: 0;
}


.option_b{
  //border:1px solid  #fcd3d3;
  //background-color: unset;
  width: 500px;
  height: 50px;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-left: 15px;
  margin-right: 0px;
  border-radius: 20px; /*设置边框圆度*/
  border: 2px solid rgba(131, 82, 3, 0.13); /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}
.option_b:hover{    /*鼠标悬停在按钮上的样式*/
  background-color: rgba(9, 0, 0, 0.5);
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);  /*阴影*/
}
.option_b span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.option_b span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.option_b:hover span {
  padding-right: 25px;
}
.option_b:hover span:after {
  opacity: 1;
  right: 0;
}


//.anniu{
//  width:650px;
//  height: 80px;
//  margin-top: 30px;
//  margin-left: 440px;
//  margin-bottom:50px;
//  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
//  border-radius:20px;   /*设置边框圆度*/
//  padding:15px;
//  background-color: rgba(255, 255, 255, 0.25);
//  box-shadow: 7px 7px 17px rgba(12, 5, 5, 0.7);   /*阴影*/
//}
//.shang-btn{
//  width:215px;
//  height: 50px;
//  margin-top: 0px;
//  margin-bottom: 2px;
//  margin-left: 5px;
//  margin-right: 15px;
//  border-radius:20px;   /*设置边框圆度*/
//  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
//  background-color: rgba(9, 0, 0, 0.3);
//}
//.shang-btn:hover{    /*鼠标悬停在按钮上的样式*/
//  background-color: rgba(9, 0, 0, 0.5);
//  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
//  color: white;
//  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);  /*阴影*/
//}
//.shang-btn span {
//  cursor: pointer;
//  display: inline-block;
//  position: relative;
//  transition: 0.5s;
//}
//.shang-btn span:after {
//  content:'«';
//  position: absolute;
//  opacity: 0;
//  top: 0;
//  left:-20px;
//  transition: 0.5s;
//}
//.shang-btn:hover span {
//  padding-left: 25px;
//}
//.shang-btn:hover span:after {
//  opacity: 1;
//  left: 0;
//}
//
//.xia-btn{
//  width:215px;
//  height: 50px;
//  margin-top: 0px;
//  margin-bottom: 8px;
//  margin-left: 10px;
//  margin-right: 10px;
//  border-radius:20px;   /*设置边框圆度*/
//  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
//  background-color: rgba(9, 0, 0, 0.3);
//}
//.xia-btn:hover{    /*鼠标悬停在按钮上的样式*/
//  background-color: rgba(9, 0, 0, 0.5);
//  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
//  color: white;
//  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);  /*阴影*/
//}
//.xia-btn span {
//  cursor: pointer;
//  display: inline-block;
//  position: relative;
//  transition: 0.5s;
//}
//.xia-btn span:after {
//  content: '»';
//  position: absolute;
//  opacity: 0;
//  top: 0;
//  right: -20px;
//  transition: 0.5s;
//}
//.xia-btn:hover span {
//  padding-right: 25px;
//}
//.xia-btn:hover span:after {
//  opacity: 1;
//  right: 0;
//}



header{
  height: 1rem;
  width: 100%;
  h1{
    font-size: 3rem;
    color: aliceblue;
    text-align: center;
    line-height: 7rem;
  }
}
</style>
